<template>
    <div class="padlr5">
        <mu-row>
            <mu-col span="3">
                <mu-auto-complete :data="choice" v-model="path" label="项目前缀" action-icon="search" :action-click="filter" @keyup.enter.native="filter" v-if="choice.length>0"></mu-auto-complete>
            </mu-col>
            <mu-col class="padt10" v-show="dir !== ''">
                <mu-button @click="searchDir" flat>查看同组</mu-button>
            </mu-col>
        </mu-row>

        <mu-expansion-panel :expand="models.length === 1" v-for="(model,index) in models" :key="index">
            <div slot="header" class="flex-r w100">
                <div class="flex1">{{model.table.path}}.<span class="fwb">{{model.table.name}}</span></div>
                <div class="flex5">{{model.table.cnName}}</div>

            </div>
            <div slot="default" class="">
<!--                <div>-->
<!--                    <mu-button small flat v-for="(f,idx) in model.fields" :key="idx"><span style="text-transform:none;">{{f.Name}}</span>-->
<!--                        <span class="c12 padl3">{{f.CnName}}</span></mu-button>-->
<!--                </div>-->
                <div class="pad5">
                    <div class="flrc bc1 cf padt5 padb5">
                        <div class="flex4 tac">复制</div>
                        <div class="flex2">Name</div>
                        <div class="flex2">CnName</div>
                        <div class="flex2">Type</div>
                        <div class="flex2">Nullable</div>
                        <div class="flex2">DefaultValue</div>
                        <div class="flex2">EntityType</div>
                        <div class="flex2">Src</div>
                        <div class="flex2">SrcDir</div>
                        <div class="flex2">Desc</div>
                    </div>
                    <div class="flrc bdda" v-for="(f,idx) in model.fields" :key="idx">
                        <div class="flex4 flrc">
                            <mu-tooltip :content="`'${f.Name}','${f.CnName}',12`" placement="left">
                                <mu-button class="cp" small icon :data-clipboard-text="`'${f.Name}','${f.CnName}',12`"><mu-icon value="content_copy"></mu-icon></mu-button>
                            </mu-tooltip>
                            <div class="flex1">'{{f.Name}}','{{f.CnName}}',12</div>
                        </div>
                        <div class="flex2 flrc">
                            <mu-button icon class="cp" small :data-clipboard-text="f.Name">
                                <mu-icon value="content_copy"></mu-icon>
                            </mu-button>
                            <span class="flex1">{{f.Name}}</span>
                        </div>
                        <div class="flex2">
                            <mu-button icon class="cp" small :data-clipboard-text="f.CnName">
                                <mu-icon value="content_copy"></mu-icon>
                            </mu-button>
                            <span class="flex1">{{f.CnName}}</span></div>
                        <div class="flex2">{{f.Type}}</div>
                        <div class="flex2">{{f.Nullable}}</div>
                        <div class="flex2">{{f.DefaultValue}}</div>
                        <div class="flex2">{{f.EntityType}}</div>
                        <div class="flex2">
                            <mu-button @click="search(f)" flat>{{f.Src}}</mu-button>
                        </div>
                        <div class="flex2">{{f.SrcDir}}</div>
                        <div class="flex2">{{f.Desc}}</div>
                    </div>
                </div>
            </div>

<!--            <div slot="action">-->
<!--                <mu-switch v-model="model.show" :label="!model.show?'查看明细':'隐藏明细'"></mu-switch>-->
<!--            </div>-->
        </mu-expansion-panel>
    </div>
</template>

<script>
    import ClipboardJS from 'clipboard'
    export default {
        name: "models",
        data() {
            return {
                open: "doc",
                path: "auth",
                dir:"",
                models: [],
                orgModels:[],
                choice:[],
            }
        },
        mounted() {
            new ClipboardJS(".cp")

            this.getModel()
        },
        methods: {
            toggle(name) {
                this.open = name
            },
            getModel() {
                this.$http.post("/_doc/_config.json", {}, res => {
                    // console.log(res.data)
                    // this.models = res.data
                    this.orgModels = res.data
                    this.createChoice()
                })
            },
            filter(){

                if (this.path === '')return
                let models = []
                for (let orgModel of this.orgModels) {
                    if (orgModel.table.path === this.path || `${orgModel.table.path}.${orgModel.table.name}` === this.path || orgModel.table.name === this.path){
                        models.push(orgModel)
                    }
                }
                this.models = models
            },
            createChoice(){
                let choice = []
                let model = {}
                for (let orgModel of this.orgModels) {
                    choice.push(`${orgModel.table.path}.${orgModel.table.name}`)
                    model[orgModel.table.path] = true
                }
                for (let modelKey in model) {
                    choice.unshift(modelKey)
                }
                this.choice = choice
            },
            search(field){
                let path = field.SrcDir
                this.dir = field.SrcDir
                if (field.SrcDir !== ''){
                    path+="."
                }else {
                    path += field.Table.path
                    this.dir = field.Table.path
                    path+="."
                }
                path+=field.Src
                this.path = path
                this.filter()
            },
            searchDir(){
                this.path = this.dir
                this.filter()
            }

        }
    }
</script>

<style scoped>

</style>